<template>
    <div>
        <el-dialog v-model="props.updateWUliaoDialog" title="修改生产领料单行" @close="closeDialog" width="70%" @open="handleOpen">
            <el-form :model="addMaterialForm" ref="formRef" :rules="rules" label-width="100px">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="产品物料编码">
                            <el-input v-model="addMaterialForm.materialProductCode" placeholder="请选择产品物料编码" readonly>
                                <template #append>
                                    <el-button :icon="Search" @click="wuliaoselect"></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品物料名称">
                            <el-input v-model="addMaterialForm.productName"  readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="领料数量" prop="quantityIssued" >
                                <el-input-number v-model="addMaterialForm.quantityIssued" placeholder="请输入领料数量" :min="0" style="width: 100%;"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="规格型号">
                            <el-input type="textarea" v-model="addMaterialForm.specificationAndModel"  readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="单位">
                            <el-input v-model="addMaterialForm.unitOfMeasure" style="width: 50%;" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="批次号">
                            <el-input v-model="addMaterialForm.batchCode" style="width: 50%;" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="仓库">
                            <el-input v-model="addMaterialForm.warehouseName" style="width: 90%;" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="库区">
                            <el-input v-model="addMaterialForm.areaName" style="width: 90%;" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="库位">
                            <el-input v-model="addMaterialForm.locationName" style="width: 90%;" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="addMaterialForm.remark"
                                :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="confirmAddMaterial(formRef)">确 定</el-button>
                    <el-button @click="closeAddMaterialDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <SelectWUliaoDialog  :selectWUliaoDialog="SelectWUliaoDialogYN" @rowDataA="rowDataA" @close-dialog="closeDialogWl"/>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, watch ,nextTick} from 'vue';// 引入vue的响应式变量和方法
import { Search } from '@element-plus/icons-vue';// 引入element-plus的图标
import SelectWUliaoDialog from '@/components/ProductionPicking/SelectWUliaoDialog.vue';// 引入选择物料对话框组件
import { ElMessage } from 'element-plus';// 引入element-plus的提示框
import { updatWmIssueLine } from '@/apis/zs/index';

const props = defineProps(['updateWUliaoDialog','updateWLFrom']);// 接收父组件传递的props
const emit = defineEmits(['close-dialog']);// 触发父组件的事件

const SelectWUliaoDialogYN = ref(false);// 选择物料对话框状态

const addMaterialForm = reactive({// 新增物料表单
    lineId: '',
    materialStockId:'',
    materialNo: '',
    materialProductCode: '',
    productName: '',
    quantityIssued: 0,
    specificationAndModel: '',
    unitOfMeasure: '',
    batchCode: '',
    warehouseName: '',
    areaName: '',
    locationName: '',
    remark: ''
});

watch(() => props.updateWUliaoDialog, (newVal) => {// 监听父组件的form数据变化
    console.log(newVal,props.updateWLFrom);
    if (newVal) {
        Object.assign(addMaterialForm, props.updateWLFrom);
    }
});

const wuliaoselect = () => {// 选择物料
    SelectWUliaoDialogYN.value = true;
};

const rowDataA = (row) => {// 选择物料后，将选择的物料信息赋值给新增物料表单
    addMaterialForm.lineId = props.updateWLFrom.lineId;
    addMaterialForm.materialStockId = row.materialProductId;
    addMaterialForm.materialNo = row.materialProductId;
    addMaterialForm.materialProductCode = row.materialProductCode;
    addMaterialForm.productName = row.materialProductName;
    addMaterialForm.quantityIssued = row.inventoryQuantity;
    addMaterialForm.specificationAndModel = row.specificationAndModel;
    addMaterialForm.unitOfMeasure = row.unitName;
    addMaterialForm.batchCode = row.inboundBatchNumber;
    addMaterialForm.warehouseName = row.warehouseName;
    addMaterialForm.areaName = row.warehouseAreaName;
    addMaterialForm.locationName = row.warehouseLocationName;
    addMaterialForm.remark = row.remark;
};

const formRef = ref(null);// 表单ref
const rules = {
    quantityIssued: [
        { required: true, message: '领料数量不能为空', trigger: 'blur' }]
};
const handleOpen = () => {//打开对话框时处理
    nextTick(()=>{
        formRef.value.clearValidate();//清除表单验证
    })
};
const confirmAddMaterial = (value) => {// 确认修改物料
    if(!value) return;
    if(addMaterialForm.materialProductCode == "") {
        ElMessage.error("请选择物料");
        return;
    }
    value.validate((valid) => {
        if (valid) {
            // console.log(addMaterialForm);
            updatWmIssueLine(addMaterialForm).then(res=>{// 调用修改物料接口
                if(res == "成功") {
                    ElMessage.success("修改成功");
                    closeAddMaterialDialog();
                }else{
                    ElMessage.error("修改失败");
                }
            });
        } else {
            ElMessage.error("请检查输入项");
        }
    });
    console.log(addMaterialForm);
};
const resetfrom = reactive({...addMaterialForm});// 重置修改物料表单
const closeDialog = () => {// 关闭修改物料对话框
    emit('close-dialog');
    Qk();
};
const closeAddMaterialDialog = () => {// 关闭修改物料对话框
    closeDialog();
};
const closeDialogWl = () => {// 关闭对话框
    SelectWUliaoDialogYN.value = false;
};
const Qk =() =>{// 清空修改物料表单
    Object.assign(addMaterialForm, resetfrom);
};
</script>

<style  scoped>

</style>
